<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../index.css">
    <title>如何实现一个类？怎么实例化这个类？</title>
</head>
<body>
    <section class="container column-center-center">
        <h2>如何实现一个类？怎么实例化这个类？</h2>
        <h5>此问题其实并不难，难的是能清楚的了解多种实现方式</h5>
        <ol>
            <li>构造函数法（this + prototype） -- 用 new 关键字 生成实例对象</li>
            <li>Object.create 法 -- 用 Object.create() 生成实例对象</li>
            <li>ES6 语法糖 class -- 用 new 关键字 生成实例对象</li>
        </ol>
    </section>
</body>
    <script>
        //1、构造函数法（this + prototype） -- 用 new 关键字 生成实例对象
        function Person(name, sex){
            this.name = name;
            this.sex = sex;
        }
        Person.prototype.info = function () {
            console.log(`姓名：${this.name}，性别：${this.sex}`);
        };
        let person = new Person('Madman', '男');
        person.info();

        //2、Object.create 法 -- 用 Object.create() 生成实例对象
        var People = {
            name : 'Madman',
            sex : '男',
            info : function () {
                console.log(`姓名：${this.name}，性别：${this.sex}`);
            }
        };
        var people = Object.create(People);
        people.info();
        // Object.create 要求 IE9+，低版本浏览器可以自行部署：
        if (!Object.create) {
            Object.create = function (o) {
                function F() {}
                F.prototype = o;
                return new F();
            };
        }

        //ES6 语法糖 class -- 用 new 关键字 生成实例对象
        class Girl{
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            info() {
                console.log(`姓名：${this.name}，年龄：${this.age}`);
            }
        }
        var girl = new Girl('韩美美', 18);
        girl.info();

    </script>
</html>